<template>
  <el-form :model="queryForm" :inline="true">
    <el-form-item label="菜单名称">
      <el-input v-model="queryForm.menuName"/>
    </el-form-item>
    <el-form-item label="权限名称">
      <el-input v-model="queryForm.perms"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="handleRest">重置</el-button>
    </el-form-item>
  </el-form>
  <el-row :gutter="4">
    <el-col :span="6">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="handleRemove(0)">删除</el-button>
    </el-col>
  </el-row>
  <el-table :data="menuList" style="width: 100%" row-key="id" default-expand-all
            @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"/>
    <el-table-column type="index" label="序号" width="55"/>
    <el-table-column prop="menuName" label="菜单名称" width="200"/>
    <el-table-column prop="perms" label="权限名称" width="200"/>
    <el-table-column prop="path" label="组件路径" width="200"/>
    <el-table-column prop="componentPath" label="组件名称" width="200"/>
    <el-table-column prop="createTime" label="创建时间" width="200"/>
    <el-table-column prop="updateTime" label="修改时间" width="200"/>
    <el-table-column prop="remark" label="备注" width="200"/>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button link type="primary" size="small" v-if="scope.row.menuType != 2">新增</el-button>
        <el-button link type="success" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleRemove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination_container">
    <el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
                   :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

  <el-dialog v-model="menuFormShow" :title="menuTitle" width="50%" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="上级菜单" prop="form.parentId">
            <el-tree-select check-strictly v-model="form.parentId" :data="menuSelectData" :render-after-expand="false"
                            placeholder="请选择上级菜单"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="form.menuType">
            <el-select v-model="form.menuType" class="m-2" placeholder="请选择菜单类型">
              <el-option
                  v-for="item in menuTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单图标" prop="form.icon">
            <el-popover
                placement="bottom-start"
                :width="460"
                trigger="click"
            >
              <template #reference>
                <el-input v-model="form.icon" placeholder="请选择图标">
                  <template #prefix>
                    <svg-icon
                        v-if="form.icon"
                        slot="prefix"
                        :name="form.icon"
                        width="16px"
                        height="16px"
                    />
                    <el-icon v-else class="el-input__icon">
                      <search/>
                    </el-icon>
                  </template>
                </el-input>
              </template>
              <IconSelect ref="iconSelect" @selected="handleSelect" :active-icon="form.icon"/>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="form.menuName">
            <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="form.sort">
            <el-input-number :min="0" v-model="form.sort"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由地址" prop="form.path">
            <el-input v-model="form.path" placeholder="请输入路由地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="组件路径" prop="form.componentPath">
            <el-input v-model="form.componentPath" placeholder="请输入组件路径"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识" prop="form.perms">
            <el-input v-model="form.perms" placeholder="请输入权限标识"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态" prop="form.status">
            <el-switch
                v-model="form.status"
                active-text="可用"
                inactive-text="不可用"
                :active-value="0"
                :inactive-value="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="form.remark">
            <el-input v-model="form.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
            <span class="dialog-footer">
                <el-button @click="menuFormShow = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import IconSelect from '@/components/IconSelect/index'
import {searchMenuList, saveMenu, updateMenu, searchMenuById, removeMenu} from '@/api/menu/index'
import {ElMessage, ElMessageBox} from 'element-plus'

let total = ref(0)
let selectIds = ref([])
let menuFormShow = ref(false);
let menuTitle = ref("");
let menuSelectData = ref([])
let menuList = ref([])

let queryForm = ref({
  menuName: undefined,
  perms: undefined,
  pageNum: 1,
  pageSize: 10
})
let form = ref({
  id: undefined,
  parentId: undefined,
  menuName: undefined,
  path: undefined,
  componentPath: undefined,
  perms: undefined,
  icon: undefined,
  menuType: 0,
  sort: 0,
  status: 0,
  remark: undefined,
})
let menuTypeOptions = ref([
  {
    value: 0,
    label: "目录"
  },
  {
    value: 1,
    label: "菜单"
  },
  {
    value: 2,
    label: "按钮"
  }
])

onMounted(() => {
  handleSearchMenuList();
})

// 查询所有菜单
function handleSearchMenuList() {
  searchMenuList(queryForm.value).then(res => {
    if (res.data.code == 200) {
      // 获取数据
      menuList.value = res.data.data.list;
      total.value = res.data.data.total;
      let menuSelect = [];
      // 添加一个根目录，所有的菜单都是根目录的子菜单
      menuSelect.push({label: '主目录', value: 0, children: []})
      // 循环查出来的数据
      for (const item of res.data.data.list) {
        let label = item.menuName;
        let value = item.id;
        let childrenList = [];
        // 判断是否有子菜单
        if (item.children.length > 0) {
          for (const childrenItem of item.children) {
            let label = childrenItem.menuName;
            let value = childrenItem.id;
            let children = {label: label, value: value}
            childrenList.push(children)
          }
        }
        let menu = {label: label, value: value, children: childrenList}
        menuSelect[0].children.push(menu);
      }
      menuSelectData.value = menuSelect;
    }
  })
}

// 重置
function handleRest() {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = 10;
  queryForm.value.menuName = undefined;
  queryForm.value.perms = undefined;
  searchMenuList(queryForm.value).then(res => {
    if (res.data.code == 200) {
      // 获取数据
      menuList.value = res.data.data.list;
      total.value = res.data.data.total;
    }
  })
}

// 搜索
function handleQuery() {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = 10;
  searchMenuList(queryForm.value).then(res => {
    if (res.data.code == 200) {
      // 获取数据
      menuList.value = res.data.data.list;
      total.value = res.data.data.total;
    }
  })
}

function handleSizeChange(sizeNumber) {
  queryForm.value.pageSize = sizeNumber;
  searchMenuList(queryForm.value).then(res => {
    if (res.data.code == 200) {
      // 获取数据
      menuList.value = res.data.data.list;
      total.value = res.data.data.total;
    }
  })
}

// 点击下一页，上一页
function handleCurrentChange(pageNumber) {
  queryForm.value.pageNum = pageNumber;
  searchMenuList(queryForm.value).then(res => {
    if (res.data.code == 200) {
      // 获取数据
      menuList.value = res.data.data.list;
      total.value = res.data.data.total;
    }
  })
}

// 多选变化
function handleSelectionChange(selection) {
  let ids = selection.map(item => item.id)
  selectIds.value = ids;
}

// 提交表单,根据form.id值判断是新增还是修改【有id值】
function handleSubmit() {
  // 做数据校验
  if (form.value.id) {
    // 修改
    updateMenu(form.value).then(res => {
      if (res.data.code == 200) {
        // 关闭窗口
        menuFormShow.value = false;
        // 刷新列表
        handleSearchMenuList();
        // 弹窗提示新增成功
        ElMessage({
          message: '修改菜单成功！',
          type: 'success',
        })
      }
    })
  } else {
    // 新增，调用新增接口
    saveMenu(form.value).then(res => {
      console.log("res=======>", res);
      if (res.data.code == 200) {
        // 关闭窗口
        menuFormShow.value = false;
        // 刷新列表
        handleSearchMenuList();
        // 弹窗提示新增成功
        ElMessage({
          message: '新增菜单成功！',
          type: 'success',
        })
      }
    })
  }
}

// 新增按钮，弹出表单
function handleAdd() {
  menuFormShow.value = true;
  menuTitle.value = "新增菜单";
}

// 修改按钮，根据id查询对应的数据，弹出表单，回显数据
function handleEdit(id) {
  // 先查询数据，再弹窗
  searchMenuById(id).then(res => {
    if (res.data.code == 200) {
      // 保障后端返回的字段名和前端字段名相同，可以一一赋值
      form.value = res.data.data;
      menuFormShow.value = true;
      menuTitle.value = "修改菜单";
    } else {
      ElMessage({
        message: '数据查询失败！',
        type: 'error',
      })
    }
  })

}

// 删除按钮，弹出是否要删除数据，确定就删除，取消就不删除
function handleRemove(id) {
  // 走删除接口
  let ids = undefined;
  if (id > 0) {
    ids = [id]
  } else {
    ids = selectIds.value;
  }
  // id其实是点击操作下的删除按钮时才会有数据
  ElMessageBox.confirm(
      `确定要删除【${ids}】数据吗?`,
      '删除菜单',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {

        removeMenu(ids).then(res => {
          if (res.data.code == 200) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            // 刷新列表
            handleSearchMenuList();
          }
        })
      })
      .catch(() => {

      })
}

function handleClose() {
  menuFormShow.value = false;
}

function handleSelect(name) {
  console.log("handleSelect=====>", name);
  form.value.icon = name;
}
</script>

<style lang="scss" scoped>
.pagination_container {
  position: relative;
  height: 40px;
  margin-top: 15px;

}

.el-pagination {
  position: absolute;
  right: 110px;
}
</style>